<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 信息发布</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/postmessage' }">发布信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="publish">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="标题" prop="name">
                    <el-input class="caption" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="desc">
                    <el-input class="caption" type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <p style="margin-left: 60px;">图片</p>
                <el-upload class="picture" multiple action="http://www.img.ttblog.cn/api/upload" :file-list="fileList"
                    list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                    :on-success="handleSuccess">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <el-form-item>
                    <el-button @click="navigateToOtherPage">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { RouterLink } from 'vue-router';
import { Confirm, Getselectnotices, updatenotice } from '@/api/messagePublish'
import bus from '@/components/common/bus.js'
import { stringify } from 'querystring';
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            ruleForm: {
                name: '',
                desc: ''
            },
            dataItems: [],
            imgList: [],
            fileList: []
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.getData()
        }
    },
    methods: {
        async getData() {
            let result = await Getselectnotices({ id: this.$route.query.id })
            if (result.code == 200) {
                this.ruleForm.name = result.data.list[0].title
                this.ruleForm.desc = result.data.list[0].content
                let str = result.data.list[0].img
                this.imgList = str.split(',')
                this.imgList.forEach(item => {
                    this.fileList.push({ url: 'http://www.img.ttblog.cn/' + item })
                })
            }
        },
        handleRemove(file, fileList) {
            const index = this.fileList.findIndex(item => item.uid === file.uid);
            if (index !== -1) {
                this.fileList.splice(index, 1);
                this.imgList.splice(index, 1)
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(res, fileList) {
            this.imgList.push(this.getPath(res))
        },
        navigateToOtherPage() {
            this.$router.push('/notice'); // 使用路径字符串进行跳转
        },
        submitForm(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    // 保存输入数据到数组中
                    this.dataItems.push({ ...this.ruleForm });
                    let obj = {
                        id: this.$route.query.id,
                        title: this.ruleForm.name,
                        content: this.ruleForm.desc,
                        img: this.imgList.join(','),
                        createtime: this.$day().format('YYYY-MM-DD'),
                        sort: 0
                    }
                    if (!this.$route.query.id) {
                        let result = await Confirm(this.$qs.stringify(obj))
                        if (result.code == 200) {
                            this.$message({ message: result.msg, type: 'success' })
                        }
                    } else {
                        let result = await updatenotice(this.$qs.stringify(obj))
                        if (result.code == 200) {
                            this.$message({ message: result.msg, type: 'success' })
                        }
                    }
                    // 清空输入框
                    this.ruleForm.name = '';
                    this.ruleForm.desc = '';
                    // 跳转页面
                    this.navigateToOtherPage();
                } else {
                    // 表单验证失败的逻辑
                    return false;
                }
            });
        },
        getPath(res) {
            return res.data.slice(res.data.lastIndexOf('/') + 1, res.data.length);
        }
    }
}
</script>

<style scoped>
.publish {
    width: 98%;
    height: 90%;
    margin: auto;
    margin-top: 10px;
    padding-top: 50px;
    background-color: #FFFFFF;
    padding: 10px;
}

h2 {
    position: relative;
    top: -35px;
    left: 25px;
}

.demo-ruleForm {
    margin-left: 50px;
}

.caption {
    width: 240px;
}

.picture {
    margin-left: 100px;
    margin-bottom: 20px;
}
</style>